<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="tn-gradient-bg__cool-6 top-font-title"
						style="height: 100%; width: 100%; display: flex;flex-direction: column;align-items: center;">

						<!-- 顶部占位 -->
						<view :style="'height:' + sConf.tH + 'px;'"> </view>
						<!-- 标题 -->
						<view
							style="width: 100%; padding: 30px;font-size: x-large;font-weight: bold;text-align: center;color: #fff;">
							{{ title }}
						</view>

						<!-- 插图 -->
						<tn-icon name="wechat" size="128" color="#fff"></tn-icon>

						<view class="" style="display: flex;justify-content: center;padding: 10px 0;">
							<text>平台流水：{{curReqsn}}</text>
						</view>
						<!-- 支付状态 -->
						<view style="color: #fff;">
							<view class="msgBox">
								<view style="font-size: 48px;">{{curText}}</view>
							</view>
						</view>

						<!-- 跳转 -->
						<view class="navBackButton">
							<button type="primary" @click="navToPage">回到首页</button>
						</view>

						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{ title }}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				topH: 0,
				title: '支付状态',
				sConf: getApp().globalData,
				curState: false,
				curReqsn: null,
				curText: '查询中...',
			}
		},
		onLoad(options) {
			// const state = String(options.state || null);
			// this.curState = state === 'success' ? true : false
			const reqsn = String(options.reqsn || null);
			this.curReqsn = reqsn
			console.log('订单详情页', this.curState);
		},
		onReady() {
			// this.designLayout()
			this.loadDefData()
		},
		methods: {
			designLayout() {
				console.log('计算窗口布局');
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.stateBox').boundingClientRect();
					query.exec((res) => {
						this.topH = this.sConf.iH - res[0].top + 10;
					});
				})
			},
			loadDefData() {
				console.log('初始化');
				let host = this.sConf.host + '/weapps/queryOrder/';
				let token = this.sConf.token || '';
				let data = {
					reqsn: this.curReqsn
				}
				console.log('请求参数', data);
				utils.authenticatorOnPost(host, token, data).then(res => {
					console.log('查询支付状态', res);
					this.curState = true
					this.curText = '支付成功'
				}).catch(err => {
					console.log('查询支付状态', err);
					this.curState = false
					this.curText = '支付失败'
				})
			},
			navToPage() {
				console.log('navToPage');
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	// .headerBox {
	// 	transform: rotate(180deg);
	// 	transition: transform 2s;
	// }

	.msgBox {
		width: 100%;
		padding: 20px 0;
		font-size: larger;
		text-align: center;
	}

	.navBackButton {
		width: 100%;
		padding: 20px 10px;
		text-align: center;
	}
</style>